import React, { Component } from 'react';
import { UploadOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input, Button, Select, Cascader, Radio, Upload, DatePicker, message } from 'antd';
import moment from 'moment';
import { requestHeadersMd5 } from '@/utils/utils';
import HOCSelect from '@/components/AntDesign/Select';

const { TextArea } = Input;
const { Option } = Select;
const RadioGroup = Radio.Group;
@Form.create()
class AddMatInfor extends Component {
  constructor(props) {
    super(props);
    const value = props.value || {};
    this.state = {
      elementArr: [],
      inpVal: value.dftVal ? value.dftVal : value.inpVal,
      fileList: value.fileList ? value.fileList : [],
      provCityAreaMatList: value.provCityAreaMatList ? value.provCityAreaMatList : [],
      areaValue: value.areaValue,
    };
  }

  static getDerivedStateFromProps(nextProps) {
    if ('value' in nextProps) {
      return {
        ...(nextProps.value || {}),
      };
    }
    return null;
  }

  inputChange = e => {
    const inpVal = e.target.value;
    if (!('value' in this.props)) {
      this.setState({ inpVal });
    }
    this.triggerChange({ inpVal });
  };

  onDateChange = (date, dateString) => {
    const inpVal = dateString;
    if (!('value' in this.props)) {
      this.setState({ inpVal });
    }
    this.triggerChange({ inpVal });
  };

  textAreaChange = e => {
    const inpVal = e.target.value;
    if (!('value' in this.props)) {
      this.setState({ inpVal });
    }
    this.triggerChange({ inpVal });
  };

  radioChange = e => {
    const inpVal = e.target.value;
    if (!('value' in this.props)) {
      this.setState({ inpVal });
    }
    this.triggerChange({ inpVal });
  };

  loadAreaData = selectedOptions => {
    const targetOption = selectedOptions[selectedOptions.length - 1];
    const parentId = selectedOptions[selectedOptions.length - 1].value;
    this.loadChange({ parentId, targetOption }, true);
  };

  selectProvCityArea = value => {
    this.triggerChange({ areaValue: value });
  };

  selectChange = currency => {
    if (!('value' in this.props)) {
      this.setState({ inpVal: currency });
    }
    this.triggerChange({ inpVal: currency });
  };

  fileOnChange = info => {
    if (!('value' in this.props)) {
      this.setState({ fileList: info.fileList });
    }
    this.triggerChange({ fileList: info.fileList, down: '2' });
    if (info.file.status === 'done') {
      if (info.file.response.success) {
        console.log(info);
      } else {
        // this.triggerChange({ fileList: info.fileList, down:'2' });
        message.warning(info.file.response.message);
      }
    }
  };

  fileDown = info => {
    this.triggerChange({ downfile: info, down: '1' });
  };

  fileOnDel = file => {
    const { fileList } = this.state;
    const newFile = fileList.filter(item => item.uid !== file.uid);
    this.triggerChange({ fileList: newFile.length ? newFile : undefined });
  };

  triggerChange = changedValue => {
    const { onChange } = this.props;
    if (onChange) {
      onChange(Object.assign({}, this.state, changedValue));
    }
  };

  loadChange = (changedValue, isLoad) => {
    const { loadData } = this.props;
    if (loadData && isLoad) {
      loadData(Object.assign({}, this.state, changedValue));
    }
  };

  render() {
    const { fileList, inpVal, provCityAreaMatList, areaValue } = this.state;
    const uploadFile = {
      name: 'file',
      action: '/esApi/fileServer/uploadFile',
      headers: {
        authorization: 'authorization-text',
        ...requestHeadersMd5(),
      },
      fileList,
      onDownload: file => this.fileDown(file),
      onChange: info => this.fileOnChange(info),
      onRemove: file => this.fileOnDel(file),
      beforeUpload: (file, fileList1) => {
        const isLt5M = file.size / 1024 / 1024 < 5; // 文件限制5M
        if (!isLt5M) {
          message.error('文件大小不允许超过5M,请重新上传！');
          fileList1.splice(fileList1.length - 1, 1);
          return false;
        }
        return true;
      },
    };
    const { value } = this.props;
    switch (value.inpType) {
      case '1':
        return <Input placeholder="请输入" value={inpVal} onChange={this.inputChange} />;
      case '2':
        return (
          <DatePicker
            value={inpVal ? moment(inpVal, 'YYYY-MM-DD') : undefined}
            onChange={this.onDateChange}
          />
        );
      case '3':
        return (
          <TextArea rows={4} placeholder="请输入" value={inpVal} onChange={this.textAreaChange} />
        );
      case '4':
        return (
          <HOCSelect
            placeholder="请选择"
            value={inpVal}
            onChange={this.selectChange}
            style={{ width: '100%' }}
          >
            {value.dictItems &&
              value.dictItems.map(k => <Option key={k.itemCode}>{k.itemName}</Option>)}
          </HOCSelect>
        );
      case '6':
        return (
          <RadioGroup value={inpVal} onChange={this.radioChange}>
            {value.dictItems &&
              value.dictItems.map(c => (
                <Radio key={c.itemCode} value={c.itemCode}>
                  {c.itemName}
                </Radio>
              ))}
          </RadioGroup>
        );

      case '8':
        return <h1>展示标题</h1>;
      case '9':
        return (
          <Upload {...uploadFile}>
            <Button>
              <UploadOutlined /> 上传附件
            </Button>
          </Upload>
        );
      case '11':
        return (
          <Cascader
            placeholder="请选择"
            options={provCityAreaMatList}
            loadData={selectedOptions => this.loadAreaData(selectedOptions)}
            onChange={values => this.selectProvCityArea(values)}
            defaultValue={areaValue}
            changeOnSelect
          />
        );
      default:
        return null;
    }
  }
}

export default AddMatInfor;
